<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: bold">串口通信设置</span>
    </div>
    <div class="text item">
      <div style="display: flex">
        <label class="font-postion">485串口号:</label>
        <el-select class="threshold_value" v-model="queryParams.rs485SerialPort" :disabled="isDisabled">
          <el-option
            v-for="item in serialPorts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">模拟量串口号:</label>
        <el-select class="threshold_value" v-model="queryParams.fz420SerialPort" :disabled="isDisabled">
          <el-option
            v-for="item in serialPorts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">485波特率:</label>
        <el-select class="threshold_value" v-model="queryParams.rs485Baudrate" :disabled="isDisabled">
          <el-option
            v-for="item in baudRates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">模拟量波特率:</label>
        <el-select class="threshold_value" v-model="queryParams.fz420Baudrate" :disabled="isDisabled">
          <el-option
            v-for="item in baudRates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">工作方式:</label>
        <el-select class="threshold_value" v-model="queryParams.spWorkStyle" :disabled="isDisabled">
          <el-option
            v-for="item in workTyles"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">数据位:</label>
        <el-select class="threshold_value" v-model="queryParams.dataBits" :disabled="isDisabled">
          <el-option
            v-for="item in dataBits"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">校验位:</label>
        <el-select class="threshold_value" v-model="queryParams.parity" :disabled="isDisabled">
          <el-option
            v-for="item in paritys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <label class="font-postion">停止位:</label>
        <el-select class="threshold_value" v-model="queryParams.stopBits" :disabled="isDisabled">
          <el-option
            v-for="item in stopBits"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex;margin-top:1rem;justify-content: center;">
        <el-button type="success" v-if="!isOpen" @click="openSerial">连接通信</el-button>
        <el-button type="info" v-if="isOpen" @click="closeSerial" plain>关闭通信</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import {closeSerialPort, findPorts, openSerialPort} from '@/api/system/argument'
export default {
  name: "SerialCommunication",
  data() {
    return {
      isDisabled:false,
      serialPorts: [],
      workTyles: [{
        value: '1',
        label: 'ModbusRTU'
      }, {
        value: '2',
        label: 'ModbusASCII',
      }],
      baudRates: [{
        value: '4800',
        label: '4800'
      }, {
        value: '9600',
        label: '9600',
      }],
      dataBits: [{
        value: '5',
        label: '5'
      }, {
        value: '6',
        label: '6',
      }, {
        value: '7',
        label: '7',
      }, {
        value: '8',
        label: '8',
      }],
      paritys: [{
        value: '0',
        label: 'NONE'
      }, {
        value: '1',
        label: 'ODD',
      }, {
        value: '2',
        label: 'EVEN',
      }, {
        value: '3',
        label: 'MARK',
      }, {
        value: '4',
        label: 'SPACE',
      }],
      stopBits:[
        {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2',
       }],
      isOpen:false,
      queryParams:{
        rs485SerialPort:'',
        fz420SerialPort:'',
        spWorkStyle: '1',
        rs485Baudrate: '4800',
        fz420Baudrate: '9600',
        dataBits:'8',
        parity:'0',
        stopBits:'1'
      }
    }
  },
  created() {
    this.commStatus();
    this.querySerialPort();
  },
  methods:{
    querySerialPort(){
      findPorts().then(response=>{
        response.forEach(result=>{
          let serialPort = {};
          serialPort.value = result;
          serialPort.label = result;
          this.serialPorts.push(serialPort);
        })
      })
    },
    openSerial(){
      this.isOpen = !this.isOpen;
      localStorage.setItem('isOpenStatus', JSON.stringify(this.isOpen));
      localStorage.setItem('rs485SerialPort', JSON.stringify(this.queryParams.rs485SerialPort));
      localStorage.setItem('fz420SerialPort', JSON.stringify(this.queryParams.fz420SerialPort));
      openSerialPort(this.queryParams).then(response=>{
        this.isDisabled = true;
        this.$modal.msgSuccess(response.data.message);
      })
    },
    closeSerial(){
      this.isOpen = !this.isOpen;
      localStorage.setItem('isOpenStatus', JSON.stringify(this.isOpen));
      closeSerialPort(this.queryParams).then(response=>{
        this.isDisabled = false;
        this.$modal.msgSuccess(response.data.message);
      })
    },
    commStatus(){
      const isOpenStatus = localStorage.getItem('isOpenStatus');
      if (isOpenStatus !== null) {
        this.isOpen = JSON.parse(isOpenStatus);
      }
      const rs485SerialPort = localStorage.getItem('rs485SerialPort');
      if (rs485SerialPort !== null) {
        this.queryParams.rs485SerialPort = JSON.parse(rs485SerialPort);
      }
      const fz420SerialPort = localStorage.getItem('fz420SerialPort');
      if (fz420SerialPort !== null) {
        this.queryParams.fz420SerialPort = JSON.parse(fz420SerialPort);
      }
    }
  }
}
</script>

<style scoped>
.font-postion{
  display:flex;
  width:22%;
  align-items: center;
  justify-content: right;
  margin-right:1rem;
}
.threshold_value{
  margin-right:2rem;
  width:18.8rem;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
